<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>主页</title>

  <link rel="stylesheet" href="/statics/css/bootstrap.min.css">
  <link rel="stylesheet" href="/statics/css/users.css">
  <link rel="stylesheet" href="../layui/css/layui.css">
  <!-- 网页icon头像 -->
  <link rel="shortcut icon" href="/statics/img/loginOk.png">

</head>

<body>
  <div id="container">

    <div class="layui-layout layui-layout-admin">
      <div class="layui-header layui-bg-black">
        <div class="layui-logo layui-hide-xs layui-bg-black">qs.xiaopangbupang.top</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
          <!-- 移动端显示 -->
          <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
            <i class="layui-icon layui-icon-spread-left"></i>
          </li>

          <li class="layui-nav-item layui-hide-xs"><a href="/admin">首页</a></li>
          <li class="layui-nav-item layui-hide-xs"><a href="/home/personalDetails">个人信息</a></li>
          <li class="layui-nav-item layui-hide-xs"><a href="/home/publishQS">创建问卷调查</a></li>
          <li class="layui-nav-item">
            <a href="javascript:;">问卷管理</a>
            <dl class="layui-nav-child">
              <dd><a href="/home/userPubishQS">发布的问卷</a></dd>
              <dd><a href="/home/fillInQS">填写的问卷</a></dd>
            </dl>
          </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
          <li class="layui-nav-item layui-hide layui-show-md-inline-block">
            <a href="javascript:;">
              <img src="../statics/img/userHeadPortrait.jpg" class="layui-nav-img">
              {{username}}
            </a>
            <dl class="layui-nav-child">
              <dd><a href="/home/updatePwd">修改密码</a></dd>
              <dd><a href="#" onclick="logOff()">注销</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
          </li>
        </ul>
      </div>

      <div class="layui-body" style="left: 0px;">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
          <div class="row">
            <!-- 左布局 -->
            <div class="col-sm-2">
              <!-- 网页logo -->
              <img src="/statics/img/logo.gif" alt="" ondragend="return false" style="width: 5rem; height: 7rem;">
            </div>
            <!-- 中间布局 -->
            <div class="col-sm-8" style="margin: auto;">

              {% for qoe in questionnairesAll %}
              <div class="layui-card shadow-lg" id="card">
                <div class="layui-card-header"><strong>调查问卷</strong></div>
                <div class="layui-card-body">
                  问卷主题： {{qoe.qsName}}<br>
                  问卷简介： {{qoe.qsSynopsis}} <br>
                  问卷编号：{{qoe.id}}
                  <div style="margin-left: 10rem;">
                    发布人：{{qoe.publishUserName}}
                  </div>
                  <hr>
                  <input type="button" name="" id="" value="前往" onclick="QS1('{{qoe.id}}')"
                    class="layui-btn layui-btn-radius layui-btn-normal" style="margin-left: 13rem;margin-top: 1rem;">
                </div>

              </div>
              {% endfor %}

            </div>

            <!-- 右布局 -->
            <div class="col-sm-2">

            </div>
          </div>
        </div>
      </div>
    </div>

  </div>





  <script src="/statics/js/jquery-3.6.0.min.js"></script>
  <!-- axios -->
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

  <script src="/statics/js/bootstrap.min.js"></script>
  <script src="/statics/js/SpiderWeb.js"></script>
  <script src="../layui/layui.js"></script>
  <script>
    layui.use(['layer', 'form'], function () {
      var layer = layui.layer
        , form = layui.form;
      var element = layui.element;
    });
  </script>

  <script>
    // 个人信息按钮
    function personalDetails() {
      window.location.href = "/home/personalDetails"
    }

    // 注销按钮点击事件
    function logOff() {
      axios({
        method: 'post',
        url: '/logout'
      }).then(function (response) {
        // axios工具下，服务器真正返回的数据在返回对象的data中
        var res = response.data;
        if (res.code === 200) {
          window.location.href = '/';
        }
      })
    }
  </script>

  <!-- 鼠标点击特效  -->
  <!-- <script type="text/javascript">
        var a_idx = 0;
        jQuery(document).ready(function ($) {
          $("body").click(function (e) {
            var a = new Array("(⌒▽⌒)", "(=・ω・=)", "(ﾟДﾟ≡ﾟдﾟ)!?", "Σ( ￣□￣||)", "(▔□▔)/", "Σ(ﾟдﾟ;)", "(^・ω・^ )", "（￣へ￣）", "(￣ε(#￣) Σ", "ヽ(`Д´)ﾉ", "(╯°口°)╯┴—┴", "🍕", "🍔", "🌭", "🥞", "🍳", "🍞", "🥐", "🍠", "🥙", "🍤", "🥩", "🍖", "🥂", "🥗", "🧀", "🍱", "🍝", "🐷", "❤", "🤣", "💕", "💖", "🌹", "💋", "🎂", "🎉", "🎃", "🎈", "🎀", "🎊", "🚗", "🎄", "❤", "💕", "💞", "💓", "💗", "💖", "💘", "💝", "💟", "💌", "🍟", "🍗", "🍿", "江呆呆是个憨憨💕💟💌");
            var $i = $("<span></span>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
              y = e.pageY;
            $i.css({
              "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
              "top": y - 20,
              "left": x,
              "position": "absolute",
              "font-weight": "bold",
              "color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
            });
            $("body").append($i);
            $i.animate({
              "top": y - 180,
              "opacity": 0
            },
              1500,
              function () {
                $i.remove();
              });
          });
        });
      </script> -->


  <!-- 问卷一按钮 -->
  <script>
    // 点击前往的问卷Id
    // var currentQSId = '';
    //     function QS1(qoeId) {
    //       currentQSId = qoeId;
    //     }

    var QS1 = function (qoeId) {
      axios({
        method: 'post',
        url: '/home/SQJudge',
        data: {
          qoeId
        }
      }).then(function (response) {
        var res = response.data;
        if (res.code === 200) {
          // 直接跳转到后端传出的/SQ1/?id=qsId路由
          window.location.href = res.url;
        }
      })
      console.log(qoeId);

    }
  </script>

  <!-- 卡片边框随机颜色 -->
  <script>
    var cardFrame = $('div #card');
    var colourArr = ["border border-primary", "border border-secondary", "border border-success", "border border-danger", "border border-warning", "border border-info", "border border-light", "border border-white"];
    var randomColour = colourArr[Math.floor(Math.random() * colourArr.length)];
    cardFrame.addClass(randomColour);
  </script>

</body>



</html>